<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">

    <f:view contentType="text/html">

        <h:head>
            <f:facet name="first">
                <meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
                <title>Administracion de Personas</title>
            </f:facet>
        </h:head>

        <h:body>
            <h:form>  
                <h1>Listado de las Personas Registradas</h1>
                <p:dataTable id="tabla" var="cliente" value="#{clienteBean.clientes}" rowKey="#{cliente.codCliente}"  
                selection="#{clienteBean.clienteSeleccionado}" selectionMode="single" 
                scrollable="true" scrollHeight="150" style="width: 800px" emptyMessage="No se ha registrado ningun Cliente"
                rendered="#{not(clienteBean.enRegistro or clienteBean.enEdicion)}" >
                <p:ajax event="rowSelect" listener="#{clienteBean.filaSeleccionada(evento)}" update="tabla"/>
                <p:ajax event="rowUnselect" listener="#{clienteBean.filaSeleccionada(evento)}" update="tabla"/>
                <f:facet name="header">  
                    Adminsitración de Clientes
                </f:facet>
                <p:column headerText="Código" width="100">  
                    #{cliente.codCliente}
                </p:column>
                <p:column headerText="Nombre" width="120">  
                    #{cliente.cliNombre}  
                </p:column>
                <p:column headerText="Direccion" width="200">  
                    #{cliente.cliDirecion}  
                </p:column>
                <p:column headerText="Telefono" width="150">  
                    #{cliente.cliTelefono}  
                </p:column>
                <p:column headerText="Genero" width="100">  
                    #{cliente.cliGenero}  
                </p:column>
                <f:facet name="footer">  
                    <p:commandButton  value="Nuevo" update="@form" actionListener="#{clienteBean.nuevo()}" disabled="#{clienteBean.disabledNuevo}"/>  
                    <p:commandButton  value="Modificar" update="@form" actionListener="#{clienteBean.modificar()}" disabled="#{clienteBean.disabledModificar}"/>  
                    <p:commandButton  value="Eliminar" update="@form" actionListener="#{clienteBean.eliminar()}" disabled="#{clienteBean.disabledEliminar}"/>  
                </f:facet>
                </p:dataTable>  
                <p:spacer height="10"/>
                <p:panel id="panelEdicion" header="Edición de Cliente" style="width: 800px"
                         rendered="#{clienteBean.enRegistro or clienteBean.enEdicion}"> 
                    <p:focus context="panelEdicion"/> 
                    <h:panelGrid columns="3" >  
                        <!--Lugar de comentario--> 
                        <p:message for="nombre" />
                        <h:outputLabel for="nombre" value="Nombre: *" />  
                        <p:inputText id="nombre" value="#{clienteBean.cliente.cliNombre}" label="Nombre" required="true"
                                     style="width: 150px" maxlength="100" />
                        
                        <p:message for="direccion" />
                        <h:outputLabel for="direccion" value="Direccion: *" />  
                        <p:inputText id="direccion" value="#{clienteBean.cliente.cliDirecion}" label="Direccion" required="true"
                                     style="width: 200px" maxlength="100" />
                        <p:message for="telefono" />
                        <h:outputLabel for="telefono" value="Telefono: *" />  
                        <p:inputText id="telefono" value="#{clienteBean.cliente.cliTelefono}" label="Telefono" required="true"
                                     style="width: 200px" maxlength="100" />
                        <p:message for="genero" />  
                        <h:outputLabel for="genero" value="Genero: *" />  
                        <p:selectOneMenu id="genero" value="#{clienteBean.cliente.cliGenero}" label="Sector Productivo" >
                            <f:selectItem itemValue="0" itemLabel="Seleccione ..."/>
                            <f:selectItem itemValue="1" itemLabel="Masculino"/>
                            <f:selectItem itemValue="2" itemLabel="Femenino"/>
                        </p:selectOneMenu>
                        <p:spacer width="1px" />
                        
                    </h:panelGrid>
                    <h:panelGrid columns="2" cellspacing="5px">
                        <p:commandButton value="Guardar"  actionListener="#{clienteBean.guardar()}" update="@form"    />
                        <p:commandButton value="Cancelar" actionListener="#{clienteBean.cancelar()}"  update="@form" immediate="true"/>
                    </h:panelGrid>  
                </p:panel>
                
            </h:form>                
            
        </h:body>
    </f:view>
</html>